*{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,form,dl,dt,dd,figure{margin:0; padding:0; border:0;}
html,body{height:100%;}
body{line-height:1.6em; font-family:Helvetica, Arial, sans-serif; color:#555; background: url(http://mbed.qiniudn.com/yanjunyi.com/img/bg-light.jpg) fixed;}
a{margin:0 2px; color:#06c; text-decoration:none;}
a:hover{text-decoration:underline;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{margin:0;}
img{border:0; vertical-align: middle;}
input,textarea{resize:none;}

@font-face {
  font-family: 'fa-addition';
  src: url('http://mbed.qiniudn.com/font/fa-addition.eot');
  src: url('http://mbed.qiniudn.com/font/fa-addition.eot#iefix') format('embedded-opentype'),
       url('http://mbed.qiniudn.com/font/fa-addition.woff') format('woff'),
       url('http://mbed.qiniudn.com/font/fa-addition.ttf') format('truetype'),
       url('http://mbed.qiniudn.com/font/fa-addition.svg#fa-addition') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fa-addition';
    src: url('http://mbed.qiniudn.com/font/fa-addition.svg?81684682#fa-addition') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fa-addition";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-firefox:before { content: '\e802'; } /* '' */
.icon-chrome:before { content: '\e803'; } /* '' */
.icon-google:before { content: '\e800'; } /* '' */
.icon-git:before { content: '\e801'; } /* '' */


.fa:before{
	display: inline-block;
	width: 1em;
	height: 1em;
	text-align: center;
}

i.arrow-left{
	display: inline-block;
	position: absolute;
	top: 12px;
	left: -8px;
	width: 15px;
	height: 15px;
	overflow: hidden;/*
	border: 1px solid #e0e0e0;
	border-width: 1px 0 0 1px;*/
	background: #fff;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.main{
	position:relative; zoom:1;
	background:rgba(238,238,238,.4);
}

aside a{
	color: rgba(255,255,255,.8);
}
aside h1{
	margin: 1em 0;
	font-weight: normal;
}
aside h1 img{
	margin-right: 1em;
	padding: 1px;
	box-shadow: 0 0 2px rgba(0,0,0,.3);
	background: rgba(255,255,255,.6);
}
aside{background-color: #888; font-size:75%; color: rgba(255,255,255,.8);}
aside .block{position: relative; margin:1em 0; line-height:1.5em;}
aside .block h3{margin:1em 0; font-size: 1.2em; font-weight: normal; color: rgba(255,255,255,.6);}
aside .block a{margin:0;}


#skills{
	width: 200px;
}
#skills li{
	position: relative;
	list-style: none;
	width: 100%;
	margin: 1em 0;
	height: 16px;
	overflow: hidden;
	/*padding: 1px;*/
	border-radius: 4px;
	background: #666;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
#skills li div{
	height: 100%;
	padding: 0 10px;
	border-radius: 3px;
	background: #82C246;
	box-shadow: inset 0 1px 1px rgba(255,255,255,.2);
	font-size: 12px;
	line-height: 16px;
	text-align: left;
}
#skills li p{
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	padding: 0 10px;
}


#tools ul:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}
#tools li{
	position: relative;
	float: left;
	list-style: none;
	width: 0;
	height: 0;
	padding: 9%;
	/*line-height: 55px;*/
	overflow-y: hidden;
	margin: 0 2.5% 2.5% 0;
	background: #555;
	text-align: center;
	font-size: 1.5rem;
}
#tools li:nth-child(5n){
	margin-right: 0;
}
#tools li i{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1em;
	height: 1em;
	overflow: hidden;
	margin: -.5em 0 0 -.5em;
	line-height: 1em;

	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
	-ms-transition: all ease .3s;
	transition: all ease .3s;
}
#tools li i[class^="icon-"]:before{
	margin: 0;
	font-size: 90%;
}
#tools li span{
	display: block;
	position: absolute;
	top: 150%;
	left: 0;
	width: 100%;
	opacity: 0;
	margin-top: -.75em;
	font-size: 12px;

	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
	-ms-transition: all ease .3s;
	transition: all ease .3s;
}
#tools li:hover i{
	opacity: 0;
	font-size: 10%;
}
#tools li:hover span{
	display: block;
	top: 50%;
	opacity: 1;
}

#contact{
	clear: both;
	width: 300px;
	margin: auto;
	margin-top: 3em;
}
#contact p{
	/*color: #555;*/
	text-align: left;
}
/*#contact a{color: #555;}*/
#contact .mail:after{
	content: "liuhuachao@foxmail.com";
}

#timeline{
	position: relative;
	margin-left: 100px;
	padding-left: 50px;
}
#timeline:before{
	content: "";
	display: block;
	position: absolute;
	left: -4px;
	height: 100%;
	border-left: 4px solid #bbb;
}
#timeline p.line-end{
	position: relative;
	left: -92px;
	width: 80px;
	border-radius: 10px;
	border: 3px solid #fff;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	color: #666;
	text-align: center;
}
#timeline ul.item-list{
	position: relative;
	list-style: none;
}
#timeline li.item{
	position: relative;
	margin: 30px 0;
	/*border: 1px solid #e0e0e0;*/
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#timeline li.item .meta{
	position: absolute;
	left: -150px;
	width: 150px;
	height: 40px;
	line-height: 40px;
	overflow: visible;
}
#timeline li.item .meta i.fa{
	position: absolute;
	right: 32px;
	width: 40px;
	height: 40px;
	padding: 7px;
	border-radius: 20px;
	border: 3px solid #fff;
	background: #fff;
	font-size: 20px;
	color: #666;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#timeline li.item p.date{
	position: absolute;
	left: 0;
	line-height: 40px;
	/*color: #fff;*/
	font-weight: bold;
	text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
#timeline li.item i.arrow-left{
	left: auto;
	right: -8px;
	box-shadow: -1px -1px 0px rgba(0,0,0,.1);
}
#timeline li.item .content{
	position: relative;
	z-index: 1;
}
#timeline li.item header{
	position: relative;
	padding: 0 15px;
	/*border-bottom: 1px solid #e0e0e0;*/
}
#timeline li.item header:after{
	content: "";
	clear: both;
	height: 0;
	overflow: hidden;
}
#timeline li.item header h3{
	display: block;
	float: left;
	height: 40px;
	line-height: 40px;
	margin-right: 10px;
	font-weight: normal;
}
#timeline li.item header .links{
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 40px;
	padding: 10px;
	line-height: 20px;
	font-size: 12px;
}
#timeline li.item:hover header .links{
	display: block;
}
#timeline li.item:hover header .link-item{
	display: inline-block;
	margin-left: 10px;	
}
#timeline li.item header .links a{
	position: relative;
	width: 20px;
	height: 20px;
	color: #999;
}
#timeline li.item header .links a:hover{
	color: #06c;
}
#timeline li.item header .links a i.fa{
	position: absolute;
	line-height: 20px;
	font-size: 1.5em;
}
#timeline li.item p.tags{
	line-height: 40px;
}
#timeline li.item span.tag{
	margin-right: 5px;
	padding: 2px 10px;
	border-radius: 3px;
	background: #ccc;
	color: #fff;
	font-size: .8em;
}
#timeline li.item figure{
	border: 1px solid #eee;
	border-width: 1px 0;
	padding: 30px 0;
	text-align: center;
}
#timeline li.item figure img{
	max-width: 100%;
}
#timeline li.item figure.multi img{
	max-width: 50%;
}
#timeline li.item article{
	padding: 15px;
	font-size: 85%;
}
#timeline li.item article p{
	text-indent: 2em;
}

@media screen and (min-width:1024px) {
	.main{
		min-height: 100%;
		margin-left: 400px;
		padding:50px;
	}
	aside{
		position:fixed;
		width: 400px;
		left:0;
		top:0;
		height:100%;
		overflow:hidden;
		padding:30px 50px;
		text-align: right;
		box-shadow:-5px 0 5px rgba(0,0,0,.1) inset;
	}

	aside .block{
		float: right;
		width: 100%;
		max-width: 300px;
	}
	aside .block:after{
		display: block;
		content: "";
		clear: both;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}
}

@media screen and (min-width: 641px) and (max-width: 1023px) {
	.main{
		padding: 1em;
	}
	aside{
		position: relative;
		padding: 1em;
	}
	#skills,#tools{
		float: left;
	}
	#skills{
		width: 25%;
		margin-right: 3%;
	}
	#tools{
		width: 72%;
	}

	#contact{
		width: auto;
	}
}

@media screen and (max-width: 640px) {
	aside,.main{
		padding: 20px 15px;
	}
	#skills{
		width: 100%;
	}
	#timeline{
		margin-left: 0;
		padding-left: 0;
	}
	#timeline:before{
		left: 50%;
		margin-left: -2px;
	}
	#timeline p.line-end{
		left: 50%;
		margin-left: -40px;
	}
	#timeline li.item{
		margin-top: 100px;
	}
	#timeline li.item .meta{
		left: auto;
		right: 50%;
		top: -60px;
		margin-right: -20px;
	}
	#timeline li.item .meta i.fa{
		right: 0;
	}
	#timeline li.item p.date{
		left: auto;
		right: 50px;
	}
	#timeline li.item i.arrow-left{
		display: none;
		right: auto;
		left: 12px;
		top: 52px;

		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
